<template>
  <div class="leftView">
    <div class="top">
      <div class="title">天气实况</div>
      <div class="content">
        <div class="top-content" v-for="(item, index) in liveData" :key="index">
          <div :class="[`live`, `live${index}`]"></div>
          <div class="right-content">
            <div class="right-top">{{ item.name }}</div>
            <div class="right-bottom">
              {{ item.value ? item.value : 0 }}{{ item.unit }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="title">天气预报</div>
      <div class="Hourly">
        <div class="prediction-title">24小时逐时预报</div>
        <div class="echartsBox">
          <VChart
            ref="chartRef"
            style="width: 1200px"
            class="chart-content"
            :option="option"
          />
        </div>
      </div>
      <div class="next">
        <div class="prediction-title">10天逐日预报</div>
        <div class="next-content">
          <div class="Previous" @click="previous">
            <span v-if="currentPage > 1">{{ `<` }}</span>
          </div>
          <div class="scrollbar-warp">
            <el-scrollbar
              ref="scrollbar"
              wrap-class="scroll-wrap"
              view-class="scroll-view"
            >
              <div class="next-value">
                <div
                  class="itemView"
                  v-for="(item, index) in DaysData"
                  :key="index"
                >
                  <div class="item">
                    <img
                      :style="{
                        height: item.weather == 53 ? '16px' : '29px',
                        marginTop: item.weather == 53 ? '13px' : '0'
                      }"
                      :src="baseHomeStore.weatherIcon[item.maxWeather]"
                      alt=""
                    />
                    <div class="temperature">{{ item.maxTemperature }}</div>
                    <div class="value">{{ weater[item.maxWeather] }}</div>
                    <div class="time">{{ item.dateStr }}</div>
                    <div class="value">{{ weater[item.minWeather] }}</div>
                    <div class="time">{{ item.minTemperature }}</div>
                    <img
                      :style="{
                        height: item.weather == 53 ? '16px' : '29px',
                        marginTop: item.weather == 53 ? '13px' : '0'
                      }"
                      :src="baseHomeStore.weatherIcon[item.minWeather]"
                      alt=""
                    />
                  </div>
                  <div class="line" v-if="index != DaysData.length - 1"></div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <div class="Next" @click="nextPage">
            <span v-if="currentPage < 3">></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import VChart from 'vue-echarts'
import * as echarts from 'echarts'
import apiList from './api/api'
import { homeStore } from '@/pages/home/store/store'
const baseHomeStore = homeStore()
const weater = ref({
  0: '晴',
  1: '多云',
  2: '阴',
  3: '阵雨',
  4: '雷阵雨',
  5: '雷阵雨伴有冰雹',
  6: '雨夹雪',
  7: '小雨',
  8: '中雨',
  9: '大雨',
  10: '暴雨',
  11: '大暴雨',
  14: '小雪',
  15: '中雪',
  16: '大雪',
  17: '暴雪',
  18: '雾',
  30: '扬沙',
  53: '霾'
})
const liveData = ref()
const weekday = ref([])
const weather = ref()
//数据转换成rich对象
const rich = ref({})
const highTemperatureColor = new echarts.graphic.LinearGradient(0, 0, 0, 0.5, [
  {
    offset: 0,
    color: 'rgba(0, 178, 255, 0.48)' // 0% 处的颜色
  },
  {
    offset: 1,
    color: 'rgba(0, 204, 255, 0)' // 100% 处的颜色
  }
])
const option = ref({
  grid: {
    show: true,
    backgroundColor: 'transparent',
    opacity: 1,
    borderWidth: '0',
    top: '80',
    left: '30',
    right: '30',
    bottom: '20'
  },
  tooltip: {
    trigger: 'item'
  },
  xAxis: [
    // 日期
    {
      type: 'category',
      boundaryGap: false,
      position: 'top',
      offset: 40,
      // zlevel: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        interval: 0
      },
      axisLabel: {
        interval: 0,
        formatter: ['{a|{value}}'].join('\n'),
        rich: {
          a: {
            color: '#FFFFFF',
            fontSize: 12
          }
        }
      },
      nameTextStyle: {},
      data: []
    },
    // 天气图标
    {
      type: 'category',
      boundaryGap: false,
      position: 'top',
      offset: -20,
      // zlevel: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,

        formatter: function (value, index) {
          return '{' + index + '| }\n{b|' + '}'
        },
        rich: rich.value
      },
      nameTextStyle: {
        fontWeight: 'bold',
        fontSize: 19
      },
      // data: this.weatherdata.weather
      data: []
    }
  ],
  yAxis: {
    type: 'value',
    show: false,
    axisLabel: {
      formatter: '{value} °C',
      color: 'white'
    }
  },
  series: [
    {
      name: '气温',
      type: 'line',
      data: [],
      symbol: 'circle',
      symbolSize: 6,
      showSymbol: true,
      smooth: true,
      itemStyle: {
        normal: {
          color: '#00EEFF'
        }
      },
      label: {
        show: true,
        position: 'top',
        color: '#00EEFF',
        formatter: '{c} °C'
      },
      lineStyle: {
        width: 1
        // color: 'white'
      },
      areaStyle: {
        // opacity: 1,
        color: highTemperatureColor
      }
    }
  ]
})

const scrollbar = ref(null)
const currentPage = ref(1)
const pageSize = ref(5)
const nextPage = () => {
  currentPage.value++
}
const previous = () => {
  currentPage.value--
}
watch(currentPage, (newData, oldData) => {
  if (newData != oldData) scrollToPosition(newData)
})
const scrollToPosition = currentPage => {
  const index = (currentPage - 1) * pageSize.value // 第二个项目的索引
  const itemHWidth = 60 // 每个项目的宽度
  const position = index * itemHWidth // 计算滚动条的位置
  scrollbar.value.scrollTo(position, 0) // 滚动到指定位置
}
const defaultCity = ref({
  city: '140100',
  county: '140106',
  latitude: '37.815',
  longitude: '112.5878'
})
//接口
// 天气实况
const weatherConditions = async () => {
  const { data } = await apiList.getByAreaCode({
    countyCode: defaultCity.value.county
  })
  liveData.value = [
    { name: '降水', value: data.rainfall, unit: 'mm' },
    { name: '相对湿度', value: data.humidity, unit: '%' },
    { name: data.windDirection, value: data.windSpeed, unit: 'm/s' },
    { name: '气温', value: data.temperature, unit: '℃' }
    // { name: '能见度', value: data.visibility, unit: 'm' },
    // { name: '气压（百帕）', value: data.pressure, unit: '' }
  ]
}

// 首页获取24小时的温度、天气预报
const chartRef = ref(null)
const get24HoursForecast = () => {
  apiList
    .getHome24HoursForecast({
      cityCode: defaultCity.value.city,
      countyCode: defaultCity.value.county
    })
    .then(res => {
      let style = res.data.weather.map(i => {
        return {
          backgroundColor: {
            image: baseHomeStore.weatherIcon[i]
          },
          height: i == 53 ? 16 : 25,
          width: 25
        }
      })
      style.forEach((i, index) => {
        rich.value[index] = i
      })
      rich.value.b = {
        // color: 'white',
        fontSize: 12,
        lineHeight: 30,
        height: 20
      }
      option.value.series[0].data = res.data.data
      option.value.xAxis[1].data = res.data.weather
      option.value.xAxis[0].data = res.data.xAxis
      // setTimeout(() => {
      chartRef.value.resize()
      // }, 100)
    })
}
const DaysData = ref()
const getHome10DaysForecast = () => {
  apiList
    .getHome10DaysForecast({
      cityCode: defaultCity.value.city,
      countyCode: defaultCity.value.county
    })
    .then(res => {
      DaysData.value = res.data
    })
}

const filterData = item => {
  defaultCity.value = {
    city: item.city,
    county: item.county,
    latitude: item.latitude,
    longitude: item.longitude
  }
  weatherConditions()
  get24HoursForecast()
  getHome10DaysForecast()
}
useEventBus('handFilterData').on(filterData)
onMounted(() => {
  weatherConditions()
  get24HoursForecast()
  getHome10DaysForecast()
})
</script>
<style lang="scss" scoped>
.leftView {
  width: 600px;
  height: calc(100% - 50px);
  position: absolute;
  top: 80px;
  left: 43px;
  z-index: 1200;
  .top {
    .content {
      display: grid;
      grid-template-columns: 155px 155px 155px; /* 定义三列，每列宽度为 100px */
      grid-template-rows: 73px 73px; /* 定义两行，每行高度为 100px */
      gap: 27px 60px; /* 列和行之间的间隔为 10px */
      margin-bottom: 23px;
    }
    .top-content {
      width: 155px;
      height: 73px;
      background: url(./images/top-content.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: flex-start;
      margin: 0 27px 32px 0;
      padding: 14px 0 14px 14px;
      box-sizing: border-box;

      .live {
        width: 49px;
        height: 53px;
        margin-right: 5px;
      }
      .right-content {
        height: 100%;
        .right-top {
          font-family: PingFang SC, PingFang SC;
          font-weight: 300;
          font-size: 14px;
          color: #afd8e5;
          line-height: 1.5;
          text-align: center;
        }
        .right-bottom {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
          line-height: 1.5;
          text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
          text-align: left;
        }
      }
      .live0 {
        background: url(./images/live0.png) no-repeat;
        background-size: 100% 100%;
      }
      .live1 {
        background: url(./images/live1.png) no-repeat;
        background-size: 100% 100%;
      }
      .live2 {
        background: url(./images/live2.png) no-repeat;
        background-size: 100% 100%;
      }
      .live3 {
        background: url(./images/live3.png) no-repeat;
        background-size: 100% 100%;
      }
      .live4 {
        background: url(./images/live4.png) no-repeat;
        background-size: 100% 100%;
      }
      .live5 {
        background: url(./images/live5.png) no-repeat;
        background-size: 100% 100%;
      }
    }
    .top-content:nth-child(3n) {
      margin-right: 0;
    }
  }
  .title {
    width: 530px;
    height: 52px;
    background: url(./images/title.png) no-repeat;
    background-size: 100% 100%;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 21px;
    color: #ffffff;
    line-height: 52px;
    text-align: left;
    padding-left: 51px;
    margin-bottom: 25px;
  }
  .bottom {
    width: 100%;
    height: calc(100% - 325px);
    .prediction-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      line-height: 1;
      text-align: left;
      position: relative;
      padding-left: 12px;
    }
    .prediction-title::before {
      content: '';
      width: 10px;
      height: 10px;
      background: url(./images/circular.png) no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: 0;
      top: 2px;
    }
    .Hourly {
      height: 270px;
      .echartsBox {
        width: 600px;
        height: 250px;
        overflow-x: auto;
        overflow-y: hidden;
      }
    }
    .next {
      height: 250px;
      .next-content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .scrollbar-warp {
          width: 90%;
          display: inline-block;
          margin: 0 10px;
        }
        .next-value {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          .itemView {
            display: flex;
            .item {
              width: 80px;
              height: 100%;
              img {
                width: 29px;
                height: 29px;
                margin-left: 50%;
                transform: translateX(-50%);
              }
              .temperature {
                font-weight: 300;
                font-size: 12px;
                color: #94c6ff;
                line-height: 25px;
                text-align: center;
              }
              .value {
                font-weight: 300;
                font-size: 12px;
                color: #ffffff;
                line-height: 25px;
                text-align: center;
              }
              .time {
                font-weight: 300;
                font-size: 12px;
                color: #94c6ff;
                line-height: 25px;
                text-align: center;
              }
            }
            .line {
              width: 21px;
              height: 173px;
              background: url(./images/line.png) no-repeat;
              background-size: 100% 100%;
              margin-top: 20px;
            }
          }
        }
        .Previous,
        .Next {
          width: 6%;
          display: inline-block;
          span {
            width: 23px;
            height: 23px;
            background: #006e91;
            box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.68);
            opacity: 0.39;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            line-height: 23px;
            font-size: 13px;
            cursor: pointer;
            display: block;
          }
        }
      }
    }
  }
}
</style>
